<template>
  <div class="main">
    <header>{{user.username}}</header>

    <div class="middle">
      <ul>
        <li>
          <span>资料报到</span><span class="finish">{{filesStatus ? '该环节已完成' : '该环节未完成'}}</span>
          <img v-if="filesStatus" class="flow_img" src="../assets/ok.png"/>
          <img v-if="!filesStatus" class="flow_img" src="../assets/goon.png"/>
        </li>

        <li @click="goInfoInput">
          <span>基础信息录入</span><span :class="infoStatus ? 'finish': 'goon'">{{infoStatus ? '该环节已完成' : '该环节未完成'}}</span>
          <img v-if="infoStatus" class="flow_img" src="../assets/ok.png"/>
          <img v-if="!infoStatus" class="flow_img" src="../assets/goon.png"/>
        </li>

        <li @click="modelShow=!modelShow">
          <span>办公用品</span>
          <span :class="officeSuppliesStatus ? 'finish': 'goon'">{{officeSuppliesStatus ? '该环节已完成' : '该环节未完成'}}</span>
          <img v-if="officeSuppliesStatus" class="flow_img" src="../assets/ok.png"/>
          <img v-if="!officeSuppliesStatus" class="flow_img" src="../assets/goon.png"/>
        </li>
        <li @click="modelShow=!modelShow">
          <span>办公站点</span>
          <span :class="officeSiteStatus ? 'finish': 'goon'">{{officeSiteStatus ? '该环节已完成' : '该环节未完成'}}</span>
          <img v-if="officeSiteStatus" class="flow_img" src="../assets/ok.png"/>
          <img v-if="!officeSiteStatus" class="flow_img" src="../assets/goon.png"/>
        </li>
        <li @click="modelShow=!modelShow">
          <span>软件支持</span>
          <span :class="softStatus ? 'finish': 'goon'">{{softStatus ? '该环节已完成' : '该环节未完成'}}</span>
          <img v-if="softStatus" class="flow_img" src="../assets/ok.png"/>
          <img v-if="!softStatus" class="flow_img" src="../assets/goon.png"/>
        </li>
        <li @click="modelShow=!modelShow">
          <span>合同签订</span>
          <span :class="contractStatus ? 'finish': 'goon'">{{contractStatus ? '该环节已完成' : '该环节未完成'}}</span>
          <img v-if="contractStatus" class="flow_img" src="../assets/ok.png"/>
          <img v-if="!contractStatus" class="flow_img" src="../assets/goon.png"/>
        </li>
        <li @click="modelShow=!modelShow">
          <span>薪酬信息录入</span>
          <span :class="salaryStatus ? 'finish': 'goon'">{{salaryStatus ? '该环节已完成' : '该环节未完成'}}</span>
          <img v-if="salaryStatus" class="flow_img" src="../assets/ok.png"/>
          <img v-if="!salaryStatus" class="flow_img" src="../assets/goon.png"/>
        </li>
      </ul>
      <div class="flow" v-if="modelShow">
        <span @click="modelShow=!modelShow">&times;</span>
        <h3>办公用品</h3>
        <p>报到部门：综合部</p>
        <p>负 责 人：罗卫军</p>
        <p>联系电话：1800000000</p>
        <p>注意事项：无</p>
      </div>
    </div>

    <footer>中移（成都）产业研究院</footer>
  </div>
</template>

<script>
  export default {
    name: 'Main_',
    data() {
      return {
        user: {},
        modelShow: false,
        filesStatus: true, // 资料报道状态
        infoStatus: false, // 信息录入状态
        officeSuppliesStatus: false, // 办公用品状态
        officeSiteStatus: false, // 办公站点状态
        softStatus: false, // 办公站点状态
        contractStatus: false, // 合同签订状态
        salaryStatus: false // 合同签订状态
      }
    },
    created() {
      this.user = this.$storage.get("user");
      this.$http.get(this.$config.user_status_uri + this.user.id).then(resp => {
        let e = resp.body.emp;
        if (e.officeSuppliesStatus == 1) {
          this.officeSuppliesStatus = true;
        }

        if (e.officeSiteStatus == 1) {
          this.officeSiteStatus = true;
        }

        if (e.softwareStatus == 1) {
          this.softStatus = true;
        }
        console.log(resp)
      })
    },
    methods: {
      goInfoInput() {
        this.$router.push({path: '/info'});
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  * {
    margin: 0;
    padding: 0;
  }

  li {
    list-style-type: none;
  }

  body {
    font-family: 微软雅黑;
    font-size: 14px;
  }

  a {
    text-decoration: none;
    color: #595959;
  }

  a:hover {
    text-decoration: underline;
  }

  header {
    width: 100%;
    height: 150px;
    line-height: 150px;
    text-align: center;
    color: #FFFFFF;
    background: url("../assets/staff_bg.png") no-repeat center #215f6a;
    background-size: 90%;
    font-size: 18px;
  }

  .middle {
    width: 100%;
    overflow: hidden;
    padding: 0px 0 30px 0;
  }

  /*background-color: #f56f6c;*/
  .middle ul li {
    width: 90%;
    height: 80px;
    height: 80px;
    line-height: 80px;
    padding: 0 5%;
  }

  .middle ul li:nth-child(2n-1) {
    background-color: #F7F7F7;
  }

  .finish {
    color: #259B24;
    margin-left: 20px;
  }

  .flow_img {
    float: right;
    display: inline;
    width: 10%;
    margin-top: 24px;
  }

  .goon {
    margin-left: 20px;
    color: #d81e06;
  }

  .flow {
    width: 80%;
    overflow: hidden;
    padding: 2% 1%;
    margin: 0 auto;
    border-radius: 4px;
    -webkit-box-shadow: 0px 0px 2px 2px #ececec;
    -moz-box-shadow: 0px 0px 2px 2px #ececec;
    box-shadow: 0px 0px 2px 2px #ececec;
    position: fixed;
    top: 160px;
    left: 9%;
    background-color: #FFFFFF;
  }

  .flow span {
    width: 12px;
    height: 12px;
    line-height: 12px;
    float: right;
    display: inline;
  }

  .flow h3 {
    width: 100%;
    text-align: center;
    margin: 10px 0;
  }

  .flow p {
    height: 40px;
    line-height: 40px;
    width: 90%;
    margin: 0 auto;
  }

  footer {
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
    color: #595959;
    margin-top: 30px;
  }
</style>
